<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/dist/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/dist/css/view.css}">
    <title>控制台</title>
      <script th:src="@{https://img.hcharts.cn/jquery/jquery-1.8.3.min.js}"></script>
        <script th:src="@{/js/console/highcharts.js}"></script>
        <script th:src="@{/js/console/exporting.js}"></script>
        <script th:src="@{/js/console/data.js}"></script>
        <script th:src="@{/js/console/series-label.js}"></script>
        <script th:src="@{/js/console/oldie.js}"></script>
        <!--<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>-->
</head>
<body class="layui-view-body">
    <div class="layui-content" style="height: 600px;">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>总用户数</span>
                                </div>
                                <div class="total" th:text="${userCount}">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <!--fsdfdsf-->
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <!--<span>项目总数</span>-->
                                <!--<span>321</span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>总项目数</span>
                                </div>
                                <div class="total" th:text="${itemsCount}">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <!--fsdfdsf-->
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <!--<span>日注册量</span>-->
                                <!--<span>321</span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>开发者人数</span>
                                </div>
                                <div class="total" th:text="${developerCount}">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <!--fsdfdsf-->
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <!--<span>日注册量</span>-->
                                <!--<span>321</span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>需求者人数</span>
                                </div>
                                <div class="total" th:text="${neederCount}">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <!--fsdfdsf-->
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <!--<span>日注册量</span>-->
                                <!--<span>321</span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="layui-col-sm12 layui-col-md12">-->
                <!--<div class="layui-card">-->
                    <!--<div class="layui-tab layui-tab-brief">-->
                        <!--<ul class="layui-tab-title">-->
                            <!--<li class="layui-this">新增数</li>-->
                            <!--<li>活跃度</li>-->
                        <!--</ul>-->
                        <!--<div class="layui-tab-content">-->
                            <!--<div class="layui-tab-item layui-show">-->
                                <!--dddd-->
                            <!--</div>-->
                            <!--<div class="layui-tab-item">-->
                                <!--ddd-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <!--<div id="container" style="width: 1100px;height:400px;margin-top: 30px;margin-left: 0px;"></div>-->
        <div id="container1" style="width: 500px;height: 400px;margin-left: 0px;margin-top: 30px;"></div>
        <div id="container2" style="width: 500px;height: 400px;margin-left: 630px;margin-top: -400px;"></div>
    </div>
    <script th:src="@{/js/console/highcharts.js}"></script>

    <!--<script>-->
        <!--var chart = null;-->
<!--// 获取 CSV 数据并初始化图表-->
<!--$.getJSON('https://data.jianshukeji.com/jsonp?filename=csv/analytics.csv&callback=?', function (csv) {-->
    <!--chart = Highcharts.chart('container', {-->
        <!--data: {-->
            <!--csv: csv-->
        <!--},-->
        <!--title: {-->
            <!--text: '每周用户访问量	'-->
        <!--},-->
        <!--subtitle: {-->

        <!--},-->
        <!--xAxis: {-->
            <!--tickInterval: 7 * 24 * 3600 * 1000, // 坐标轴刻度间隔为一星期-->
            <!--tickWidth: 0,-->
            <!--gridLineWidth: 1,-->
            <!--labels: {-->
                <!--align: 'left',-->
                <!--x: 3,-->
                <!--y: -3-->
            <!--},-->
            <!--// 时间格式化字符-->
            <!--// 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值-->
            <!--dateTimeLabelFormats: {-->
                <!--week: '%Y-%m-%d'-->
            <!--}-->
        <!--},-->
        <!--yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）-->
            <!--title: {-->
                <!--text: null-->
            <!--},-->
            <!--labels: {-->
                <!--align: 'left',-->
                <!--x: 3,-->
                <!--y: 16,-->
                <!--format: '{value:.,0f}'-->
            <!--},-->
            <!--showFirstLabel: false-->
        <!--}, {    // 第二个坐标轴，放置在右边-->
            <!--linkedTo: 0,-->
            <!--gridLineWidth: 0,-->
            <!--opposite: true,  // 通过此参数设置坐标轴显示在对立面-->
            <!--title: {-->
                <!--text: null-->
            <!--},-->
            <!--labels: {-->
                <!--align: 'right',-->
                <!--x: -3,-->
                <!--y: 16,-->
                <!--format: '{value:.,0f}'-->
            <!--},-->
            <!--showFirstLabel: false-->
        <!--}],-->
        <!--legend: {-->
            <!--align: 'left',-->
            <!--verticalAlign: 'top',-->
            <!--y: 20,-->
            <!--floating: true,-->
            <!--borderWidth: 0-->
        <!--},-->
        <!--tooltip: {-->
            <!--shared: true,-->
            <!--crosshairs: true,-->
            <!--// 时间格式化字符-->
            <!--// 默认会根据当前的数据点间隔取对应的值-->
            <!--// 当前图表中数据点间隔为 1天，所以配置 day 值即可-->
            <!--dateTimeLabelFormats: {-->
                <!--day: '%Y-%m-%d'-->
            <!--}-->
        <!--},-->
        <!--plotOptions: {-->
            <!--series: {-->
                <!--cursor: 'pointer',-->
                <!--point: {-->
                    <!--events: {-->
                        <!--// 数据点点击事件-->
                        <!--// 其中 e 变量为事件对象，this 为当前数据点对象-->
                        <!--click: function (e) {-->
                            <!--$('.message').html( Highcharts.dateFormat('%Y-%m-%d', this.x) + ':<br/>  访问量：' +this.y );-->
                        <!--}-->
                    <!--}-->
                <!--},-->
                <!--marker: {-->
                    <!--lineWidth: 1-->
                <!--}-->
            <!--}-->
        <!--}-->
    <!--});-->
<!--});-->

        <!--// 图表初始化函数-->
        <!--var chart = Highcharts.chart('container', options);-->
    <!--</script>-->

    <script type="text/javascript">
    	// 创建渐变色
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

// 构建图表
var chart = Highcharts.chart('container1',{
    title: {
        text: '2018年码虫项目类型分布'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                },
                connectorColor: 'silver'
            }
        }
    },
    series: [{
        type: 'pie',//图表类型
        name: '类型占比',
        data: [
            ['Web网站',   [[${web}]]],
            ['App开发',   [[${app}]]],
/*            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },*/
            ['微信公众号', [[${weChart}]]],
            ['小程序',  [[${smallPrograme}]]],
            ['HTML应用',[[${htmlCount}]]],
            ['其他',[[${othersCount}]]]
        ]
    }]
});
  // 图表初始化函数
        var chart = Highcharts.chart('container1', options);
    </script>


    <script type="text/javascript">

        // 构建图表
        var chart = Highcharts.chart('container2',{
            title: {
                text: '2018年码虫开发者擅长技术'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',//图表类型
                name: '技术类型占比',
                data: [
                    ['Net', [[${netS}]]],
                    ['Java', [[${javaS}]]],
                    {
                        name: 'PHP',
                        y: [[${phpS}]],
                        sliced: true,
                        selected: true
                    },
                    ['ASP', [[${aspS}]]],
                    ['C语言', [[${cS}]]],
                    ['大数据', [[${bigdataS}]]]
                ]
            }]
        });

    </script>

    <script type="text/javascript" th:src="@{/layui/dist/layui.all.js}"></script>
    <script>
     var element = layui.element;
    </script>
</body>
</html>